<template>
  <a-row id="top">
    <a-col :sm="12" :md="12" :lg="8" class="title">
      <img v-if="$store.state.commonModule.oemConfig.logo2" ondragstart="return false" oncontextmenu="return false" :src="$store.state.commonModule.oemConfig.logo2"
        style="margin-left:1rem; height:28px;" alt="logo" />
      <!-- <div class="split-vertical-line"></div> -->
      <!-- <img 
        ondragstart="return false"
        oncontextmenu="return false"
        src="../../../static/copyright/line_white.png" style="margin:1rem;"/> -->
      <!-- <img ondragstart="return false" oncontextmenu="return false" v-if="$store.state.language == 'zh'"
        :src="$store.state.commonModule.oemConfig.logo3" alt="fbs_logo" style="width:218px; height:28px;" />
      <img ondragstart="return false" oncontextmenu="return false" v-if="$store.state.language == 'en'"
        src="../../../static/copyright/logo_fbs_English.png" alt="fbs_en_logo"
        style="margin-right:80px;width:135px; height:28px;" /> -->
    </a-col>
    <!-- <a-col :xs='3' :sm='3' :md='{span:3, offset:2}' :lg='{span:3, offset:2}' :xl='{span:3, offset:2}'> -->
    <!-- <a-col :sm="3" :md="3" :lg="3">
      <p class="dataview recovery">
        <a-icon style="margin-right: 0.5rem" :component="clean" />Recovery
        IO：{{ recover }}/s
      </p>
    </a-col> -->
    <!-- <a-col :sm="3" :md="4" :lg="4">
      <p class="dataview">
        <a-icon style="margin-right: 0.5rem" :component="reco" />{{
          $t("Data-clean")
        }}
        IO：{{ cleaner == true ? "active" : "Not active" }}
      </p>
    </a-col> -->
    <a-col class="topfunc" style="text-align:right" :sm="12" :md="12" :lg="16">
      <a-menu mode="horizontal" style="font-size: 16px" :selectedKeys="currentSelectedKeys">
        <!-- <a-menu-item key="recover">
          <p class="dataview" >
            <a-icon style="margin-right: 0.5rem" :component="clean" />Recovery
            IO：{{ recover }}/s
          </p>
        </a-menu-item>
        <a-menu-item key="cleaner">
          <p class="dataview">
            <a-icon style="margin-right: 0.5rem" :component="reco" />{{$t("Data-clean")}}
            IO：{{ cleaner == true ? "active" : "Not active" }}
          </p>
        </a-menu-item> -->
        <!--未授权-->
        <a-menu-item key="goRight" @click="goRight" v-if="oflag == false">
          <span class="dataview" style="padding: 7.5px 16px; color: #fc3554; cursor: pointer;">
            <img ondragstart="return false" oncontextmenu="return false"
              src="../../../static/images/png/ic_unauthorized.png" alt="" />{{ $t("Unauthorized") }}
          </span>
        </a-menu-item>

        <!--版权-->
        <!-- <a-menu-item key="copyright" @click="toRight" v-userAuth="'A6'">
          <a-icon type="copyright" />{{ $t("Copyright") }}
        </a-menu-item> -->

        <!-- 告警 -->
        <a-menu-item key="alert">
          <a-popover placement="bottom">
            <template slot="content">
              <p v-if="warndata.length == 0" style="text-align:center">{{ $t('No-alarm-info') }}</p><!--暂无任何告警信息！-->
              <div class="tall" v-else>
                <a-button type="danger" block @click="emptyWarnInfo">{{ $t("Empty") }}<a-icon
                    type="close-circle" /></a-button>
                <a-row class="tcontent" v-for="(item, index) in warndata" :key="index"
                  :class="item.severity == '严重' ? 'tred' : item.severity == '警告' ? 'worange' : item.severity == '提示' ? 'wyellow' : 'tgreen'">
                  <a-col :span="5" style="text-align:center">
                    <a-icon type="warning" theme="filled" class="ticon"
                      :class="item.severity == '严重' ? 'tredp' : item.severity == '警告' ? 'worangep' : item.severity == '提示' ? 'wyellowp' : 'tgreenp'" />
                  </a-col>
                  <a-col :span="19">
                    <span class="ttitle"
                      :class="item.severity == '严重' ? 'tred' : item.severity == '警告' ? 'worange' : item.severity == '提示' ? 'wyellow' : 'tgreen'">
                      {{ $t("Operation-prompt") }}
                    </span>
                    <small class="block">{{ item.start_time }}</small>
                    <div class="descText">
                      <!-- :id="'tips' + index" :class="!a.extend ? 'tdetail' : ''" -->
                      {{ item.des }}
                    </div>
                  </a-col>
                </a-row>
              </div>
            </template>
            <span>
              <a-badge v-if="warndata.length == 0"><a-icon type="exclamation-circle" /></a-badge>
              <a-badge v-else dot="dot"><a-icon type="exclamation-circle" /></a-badge>
              {{ $t('Alert') }}
            </span>
          </a-popover>
        </a-menu-item>

        <!-- 通知 -->
        <a-menu-item :key="'/Notice'">
          <a-popover placement="bottom" @visibleChange="getTipsList">
            <template slot="content">
              <p v-if="$store.state.tipslist.length == 0" style="text-align:center">
                {{ $t('No-operation-tip') }}<!--暂无任何操作提示！-->
              </p>
              <div class="tall" v-if="$store.state.tipslist.length != 0">
                <a-button type="danger" block @click="empty">{{ $t("Empty") }}<a-icon type="close-circle" /></a-button>
                <a-row class="tcontent" v-for="(a, i) in tipArr" :key="i" :class="a.status == 0 || (a.status == undefined && String(a.ids).indexOf('success') != -1)
                  ? 'tgreen'
                  : a.status == 2
                    ? 'tblue'
                    : a.status == 1
                      ? 'tred'
                      : 'tgrey'">
                  <a-col :span="5" style="text-align:center">
                    <a-icon type="close-circle" theme="filled" class="ticon tredp" v-show="a.status == 1" />
                    <a-icon type="check-circle" theme="filled" class="ticon tgreenp"
                      v-show="a.status == 0 || (a.status == undefined && String(a.ids).indexOf('success') != -1)" />
                    <a-icon type="clock-circle" theme="filled" class="ticon tbluep" v-show="a.status == 2" />
                    <a-icon type="question-circle" theme="filled" class="ticon tgreyp"
                      v-show="a.status == undefined && a.ids == undefined" />
                  </a-col>
                  <a-col :span="19">
                    <span class="ttitle" :class="a.status == 0
                      ? 'tgreen'
                      : a.status == 2
                        ? 'tblue'
                        : a.status == 1
                          ? 'tredp'
                          : ''">{{ $t("Operation-prompt") }}</span>
                    <small class="block">{{ a.time }}</small>
                    <div :id="'tips' + i" :class="!a.extend ? 'tdetail' : ''">
                      {{ a.des }}
                    </div>
                    <a @click="aexpend(a, i)" style="float:right;padding:0;margin:0">{{ !a.extend ? $t("Expand") :
                      $t("Pack_up") }}</a>
                  </a-col>
                </a-row>
              </div>
            </template>
            <span>
              <a-badge v-if="$store.state.tipslist.length == 0"><a-icon type="alert" /></a-badge>
              <a-badge v-if="$store.state.tipslist.length !== 0" dot="dot"><a-icon type="alert" /></a-badge>
              <span style="margin-left:.3rem">{{ $t("Notice") }}</span>
            </span>
          </a-popover>
        </a-menu-item>
        <!--任务-->
        <a-menu-item>
          <a-popover placement="bottom">
            <!-- @visibleChange="getTasksList" -->
            <template slot="content">
              <a-spin :spinning="loading">
                <span style="color:#006DB8;cursor:pointer" @click="handleNavigate">查看全部</span>
                <div class="tall" style="margin-top: 8px;">
                  <p style="padding:0.1em 1em;text-align: center;background:#f0f0f0">
                    ---- {{ $t("Executing") }} ----
                  </p>
                  <div style="text-align:center" v-if="tasksIng.length == 0">{{ $t('No-task-progress') }}</div>
                  <a-row class="tcontent tblue" v-for="(t, i) in tasksIng" :key="'tasking' + i">
                    <!-- <div v-if="t.flag == 2"> -->
                    <a-col :span="5" style="text-align:center">
                      <a-icon type="sync" spin class="ticon tbluep" />
                    </a-col>
                    <a-col :span="19">
                      <span class="ttitle tbluep">{{ $t("Task-message") }}</span>
                      <small class="block" v-if="t.start_time">{{ t.start_time.slice(0, 19) }}</small>
                      <div :id="'taskIng' + i" :class="!t.extend ? 'tdetail' : ''">
                        {{ t.des }}
                      </div>
                      <a @click="expend(t, i)" style="float:right">
                        {{ !t.extend ? $t("Expand") : $t("Pack_up") }}
                      </a>
                    </a-col>
                    <!-- </div> -->
                  </a-row>
                  <!-- 已完成 -->
                  <p style="padding:0.1em 1em;text-align: center;background:#f0f0f0">
                    ---- {{ $t("Finished") }} ----
                  </p>
                  <div style="text-align:center" v-if="tasksFinished.length == 0">{{ $t('No-completed-task') }}</div>
                  <a-row class="tcontent" v-for="(t, i) in tasksFinished" :key="'taskFinished' + i"
                    :class="t.flag == 0 ? 'tgreen' : t.flag == 1 ? 'tred' : ''">
                    <!-- <div v-if="t.flag == 0 || t.flag == 1"> -->
                    <a-col :span="5" style="text-align:center">
                      <a-icon type="close-circle" theme="filled" class="ticon tredp" v-show="t.flag == 1" />
                      <a-icon type="check-circle" theme="filled" class="ticon tgreenp" v-show="t.flag == 0" />
                    </a-col>
                    <a-col :span="19">
                      <span class="ttitle" :class="t.flag == 0 ? 'tgreenp' : t.flag == 1 ? 'tredp' : ''">{{
                        $t("Task-message") }}</span>
                      <small class="block" v-if="t.end_time">{{ t.end_time.slice(0, 19) }}</small>
                      <div :id="'task' + i" :class="!t.extend ? 'tdetail' : ''">{{ t.des }}</div>
                      <a @click="expend2(t, i)" style="float:right">
                        {{ !t.extend ? $t("Expand") : $t("Pack_up") }}
                      </a>
                    </a-col>
                    <!-- </div> -->
                  </a-row>
                </div>
              </a-spin>
            </template>
            <span>
              <a-badge v-if="$store.state.taskflag == false"><a-icon type="ordered-list" /></a-badge>
              <a-badge v-if="$store.state.taskflag == true" dot="dot"><a-icon type="ordered-list" /></a-badge>
              <span>{{ $t("Task") }}</span>
            </span>
          </a-popover>
        </a-menu-item>
        <!--配置-->
        <!-- <a-sub-menu v-userAuth="'A2'">
          <span slot="title" class="submenu-title-wrapper"
            ><a-icon type="setting" />{{ $t("Configuration") }}</span
          >
          机器
          <a-menu-item :key="'/machine'" v-userAuth="'A3'">
            <router-link :to="{ name: 'machine' }">{{
              $t("Machine")
            }}</router-link>
          </a-menu-item>
          磁盘
          <a-menu-item :key="'/diskmanage'" v-userAuth="'A4'">
            <router-link :to="{ name: 'diskmanage' }">{{
              $t("Disk")
            }}</router-link>
          </a-menu-item>
          告警
          <a-menu-item :key="'/alertmanage'" v-userAuth="'A5'">
            <router-link :to="{ name: 'alertmanage' }">{{
              $t("Alert")
            }}</router-link>
          </a-menu-item>
        </a-sub-menu> -->

        <!--语言切换-->
        <!-- <a-sub-menu id="lan_ID">
          <span slot="title" class="submenu-title-wrapper">
            <span class="iconfont">&#xe6d2;</span> -->
        <!-- <img
              v-if="$store.state.language == 'en'"
              style="margin-right: 10px"
              src="../../../static/images/png/ic_translate_normal.png"
            />
            <img
              v-else
              style="margin-right: 10px"
              src="../../../static/images/png/ic_translate_select.png"
            /> -->
        <!-- {{ $t("Language") }} -->
        <!-- </span>
          <a-menu-item key="Chinese" @click="changelanguage('zh')"
            >{{ $t("Chinese") }}
          </a-menu-item>
          <a-menu-item key="English" @click="changelanguage('en')">
            {{ $t("English") }}
          </a-menu-item>
        </a-sub-menu> -->

        <!--主题-->
        <!-- <a-sub-menu>
          <span slot="title" class="submenu-title-wrapper">
            <span class="iconfont">&#xe6d2;</span>
            主题
          </span>
          <a-menu-item key="default" @click="changeTheme('default')">默认</a-menu-item>
          <a-menu-item key="wz_blue" @click="changeTheme('wz_blue')">五舟色</a-menu-item>
        </a-sub-menu> -->
        <a-sub-menu>
          <span slot="title" class="submenu-title-wrapper">
            <a-icon type="user" />{{ $store.state.loginuser }}<a-icon type="down" style="margin-left:2px" />
          </span>
          <!-- 用户管理 -->
          <!-- <a-menu-item :key="'/usermanage'">
            <router-link :to="{ name: 'usermanage' }">{{$t("User-Management")}}</router-link>
          </a-menu-item> -->
          <!-- <a-menu-item :key="'/log'">
            <router-link :to="{ name: 'log' }">{{$t("Operation-log")}}</router-link>
          </a-menu-item> -->
          <a-menu-item key="copyright" @click="toRight" v-userAuth="'A6'">
            <a-icon type="copyright" />{{ $t("Copyright") }}
          </a-menu-item>
          <!-- 语言切换 -->
          <a-menu-item key="changLang" @click="changeLanguage">
            <div class="lang-desc">
              <span>
                <i class="icon" :class="$store.state.language == 'zh' ? 'icon-cn16l' : 'icon-en16l'">
                </i>
                {{ $t("Switch-lang") }}
              </span>
              <span>{{ $store.state.language == 'zh' ? '中文' : 'English' }}</span>
            </div>
          </a-menu-item>
          <!-- <a-sub-menu key="config" v-userAuth="'A2'">
            <span slot="title">
              <a-icon type="setting" />{{ $t("Configuration") }}
            </span>
            <a-menu-item :key="'/machine'" v-userAuth="'A3'">
              <router-link :to="{ name: 'machine' }">{{
                $t("Machine")
              }}</router-link>
            </a-menu-item>
            <a-menu-item :key="'/diskmanage'" v-userAuth="'A4'">
              <router-link :to="{ name: 'diskmanage' }">{{
                $t("Disk")
              }}</router-link>
            </a-menu-item>
            <a-menu-item :key="'/alertmanage'" v-userAuth="'A5'">
              <router-link :to="{ name: 'alertmanage' }">{{
                $t("Alert")
              }}</router-link>
            </a-menu-item>
          </a-sub-menu> -->
          <a-menu-divider></a-menu-divider>
          <a-menu-item :key="'/'" @click="quit">
            <div><a-icon type="export" />{{ $t("Quit") }}
              <!-- <router-link :to="{ name: 'Login' }">{{$t("Quit")}}</router-link> -->
            </div>
          </a-menu-item>
        </a-sub-menu>
      </a-menu>
    </a-col>

    <!-- 打开版权信息 -->
    <GoTip :rightF="rightF" @rightTo="changeTo" @omodal="changemodal" @oFlag="oFlag" :powerData="powerData"
      @isOpenDeclare="isOpenDeclare" :currentVersion="currentVersion" />
    <ToRight :toflag="toflag" @omodal="changemodal" @updateRight="updateRight" :powerData="powerData"
      :isShowCloseBtn="isShowCloseBtn" />
    <SoftwareDeclare :isVisible="declare_dialog" @isOpenDeclare="isOpenDeclare" />

    <TokenExpireTip :visible="showTokenErrorModal" @closeTokenModal="closeTokenModal" />

    <!-- 一键清除警告弹窗  -->
    <a-button v-if="warningList.length > 0" class="clear" @click="handleClear">
      <i class="icon icon-clean16f"></i>
      <span style="margin-left: 4px;">{{ $t('一键清除警告弹窗') }}</span>
    </a-button>
  </a-row>
</template>
<script>
import $ from "jquery";
// import clean from "../../../static/images/svg/ic_cleaning.svg";
// import reco from "../../../static/images/svg/ic_RecoveryIO.svg";

import GoTip from "../copyright/goTip";
import ToRight from "../copyright/toRight";
import SoftwareDeclare from '@/components/copyright/SoftwareDeclare'
import TokenExpireTip from '@/components/common/TokenExpireTip'

import request from '@/request/request'

export default {
  name: "Topbar",
  components: { GoTip, ToRight, SoftwareDeclare, TokenExpireTip },
  // template: '<a-icon :component = "clean,reco" />',
  data() {
    return {
      // clean,
      // reco,
      basetips: [],
      basetasks: [],
      recover: "",
      cleaner: "",
      timeoutId: "",
      intervalId: "",
      language_temp: "",
      rightF: false,
      toflag: false,
      oflag: 'init',
      tipArr: [],
      taskArr: [],
      tasksIng: [],
      tasksFinished: [],
      warndata: [],
      powerData: [],
      isShowCloseBtn: false,
      currentSelectedKeys: ['default'],
      declare_dialog: false,
      timer: null,
      currentVersion: '',
      showTokenErrorModal: false,
      warningList: [],
      loading: false,
    };
  },
  methods: {
    //获取授权信息
    getRight() {
      request('get', 'license/').then(res => {
        // console.log('获取授权信息', res)
        if (res.data.flag == 1) {
          this.toflag = true;
          this.isShowCloseBtn = false;
          this.model(res.data.id) //返回模板
          this.notice(res.data.id, res.data.params, res.data.flag) //通知列表显示
        } else {
          this.powerData = res.data.msg;
          // this.toflag = false;
          this.isShowCloseBtn = true;
        }
      });
    },

    //获取版本
    getVersion() {
      request('get', 'version/information').then(res => {
        // console.log('获取版本', res)
        if (res.data.flag == 1) {
          this.model(res.data.id) //返回模板
          this.notice(res.data.id, res.data.params, res.data.flag) //通知列表显示
        } else {
          if (res.data.code == 0) {
            this.currentVersion = res.data.value;
          }
        }
      })
    },

    // 授权
    toRight() {
      this.rightF = true;
      this.toflag = false;
    },
    goRight() {
      this.toflag = true;
    },
    changemodal(val) {
      this.rightF = val;
      this.toflag = false;
    },
    oFlag(val) {
      this.oflag = val
    },
    changeTo(payload) {
      this.toflag = payload.flag;
      this.isShowCloseBtn = payload.isShowCloseBtn;
    },
    // 获取任务信息
    getTasksList() {
      // this.taskArr = JSON.parse(localStorage.getItem("tasklist"));
      request('put', 'logmanage/background_task/recent', {
        page_size: 10
      }).then(res => {
        // console.log('任务列表', res)
        if (res.data.flag == 1) {
          if (res.data.id === 'token/error') {
            this.showTokenErrorModal = true;
          }
          this.model(res.data.id) //返回模板
          this.notice(res.data.id, res.data.params, res.data.flag) //通知列表显示
        } else {
          this.tasksIng = [];
          this.tasksFinished = [];
          let lists = res.data;
          if (JSON.parse(localStorage.getItem("language")) === 'zh') {
            this.taskCallback(lists, 'zh_CN')
          } else {
            this.taskCallback(lists, 'en_US')
          }
        }
      }).catch(err => {
        console.log(err);
      })
    },

    taskCallback(list, language) {
      this.loading = true
      const _res = JSON.parse(localStorage.getItem("basetips"));
      list.forEach(item => {
        item.extend = false;
        const task_name = item.task_name
        const des = item.params.des
        const replace = _res[task_name][language]
        const error = _res[des]
        let content = ''
        let message = ''
        //  进行中
        if (item.state == 0) {
          content = `${replace}${this.$t('，进行中')}`
          //  完成
        } else {
          if (item.flag == 0) {
            content = `${replace}${this.$t('，成功')}`
          } else {
            if (des && error) message = error[language]
            else message = des
            content = `${replace}${this.$t('，失败')}：${message}`
          }
        }
        item.des = this.asFormat(
          content,
          item.params
        );
        item.state == 0 ? this.tasksIng.push(item) : this.tasksFinished.push(item)
      })
      this.loading = false
    },
    expend(item, key) {
      // this.taskArr[key].extend = !item.extend;
      this.tasksIng[key].extend = !item.extend;
      $("#taskIng" + key).removeClass("");
      $("#taskIng" + key).toggleClass("tdetail");
    },
    expend2(item, key) {
      this.tasksFinished[key].extend = !item.extend;
      $("#task" + key).removeClass("");
      $("#task" + key).toggleClass("tdetail");
    },
    // 获取提示信息
    getTipsList() {
      this.tipArr = JSON.parse(localStorage.getItem("tipslist"));
      // console.log('提示列表', this.tipArr)
    },
    aexpend(item, key) {
      this.tipArr[key].extend = !item.extend;
      $("#tips" + key).removeClass("");
      $("#tips" + key).toggleClass("tdetail");
    },

    changeTipLanguage() {
      // 对提示内容进行中英翻译，并且重新格式化显示
      const _res = JSON.parse(localStorage.getItem("basetips"));
      for (const item of this.$store.state.tipslist) {
        try {
          if (this.language_temp == "zh") {
            item.des = this.asFormat(
              _res[item.ids].zh_CN,
              item.ds
            );
          } else {
            item.des = this.asFormat(
              _res[item.ids].en_US,
              item.ds
            );
          }
          this.$store.commit("gettips", {
            tipslist: this.$store.state.tipslist,
          });
        } catch {
        }
      }
      for (const item of this.$store.state.tasklist) {
        try {
          if (this.language_temp == "zh") {
            item.des = this.asFormat(
              _res[item.id].zh_CN,
              item.params
            );
          } else {
            item.des = this.asFormat(
              _res[item.id].en_US,
              item.params
            );
          }
          this.$store.commit("gettasks", {
            tasklist: this.$store.state.tasklist,
          });
        } catch {
        }
      }
      // for (var i = 0; i < this.$store.state.tipslist.length; i++) {
      //   try {
      //     if (this.language_temp == "zh") {
      //       this.$store.state.tipslist[i].des = this.asFormat(
      //         _res[this.$store.state.tipslist[i].ids].zh_CN,
      //         this.$store.state.tipslist[i].ds
      //       );
      //     } else {
      //       this.$store.state.tipslist[i].des = this.asFormat(
      //         _res[this.$store.state.tipslist[i].ids].en_US,
      //         this.$store.state.tipslist[i].ds
      //       );
      //     }
      //     this.$store.commit("gettips", {
      //       tipslist: this.$store.state.tipslist,
      //     });
      //   } catch {
      //   }
      // }
      // this.tasksIng.forEach(item => {
      //   try {
      //     if (this.language_temp == "zh") {
      //       item.des = this.asFormat(
      //         _res[item.msg].zh_CN,
      //         item.params
      //       );
      //     } else {
      //       item.des = this.asFormat(
      //         _res[item.msg].en_US,
      //         item.params
      //       );
      //     }
      //   } catch { }
      // })
      // this.tasksFinished.forEach(item => {
      //   try {
      //     if (this.language_temp == "zh") {
      //       item.des = this.asFormat(
      //         _res[item.msg].zh_CN,
      //         item.params
      //       );
      //     } else {
      //       item.des = this.asFormat(
      //         _res[item.msg].en_US,
      //         item.params
      //       );
      //     }
      //   } catch { }
      // })
      // for (var j = 0; j < this.$store.state.tasklist.length; j++) {
      //   try {
      //     if (this.language_temp == "zh") {
      //       item.des = this.asFormat(
      //         _res[item.id].zh_CN,
      //         item.params
      //       );
      //     } else {
      //       item.des = this.asFormat(
      //         _res[item.id].en_US,
      //         item.params
      //       );
      //     }
      //     this.$store.commit("gettasks", {
      //       tasklist: this.$store.state.tasklist,
      //     });
      //   } catch {
      //   }
      // }
      this.getTasksList();
    },

    changeLanguage() {
      let lang = '';
      if (this.$store.state.language == 'zh') {
        lang = 'en';
      } else {
        lang = 'zh';
      }
      this.$i18n.locale = lang;
      this.language_temp = lang;
      localStorage.setItem("language", this.language_temp);
      this.language_temp = localStorage.getItem("language");
      this.$store.commit("getlanguage", {
        language: this.language_temp,
      });
      this.changeTipLanguage();
    },

    //语言切换
    // changelanguage(lang) {
    //   this.$i18n.locale = lang;
    //   this.language_temp = lang;
    //   localStorage.setItem("language", this.language_temp);
    //   this.language_temp = localStorage.getItem("language");
    //   this.$store.commit("getlanguage", {
    //     language: this.language_temp,
    //   });
    //   if (lang == 'zh') {
    //     this.currentSelectedKeys[1] = 'Chinese';
    //   } else {
    //     this.currentSelectedKeys[1] = 'English';
    //   }

    //   this.changeTipLanguage();
    //   // this.$router.go(0)
    // },

    //切换主题
    changeTheme(key) {
      this.currentSelectedKeys[0] = key;
      document.body.setAttribute('data-theme', key);
      localStorage.setItem('theme', key);
    },

    empty() {
      //清空提示内容
      this.$store.commit("gettips", {
        tipslist: [],
      });
    },
    //清空告警信息
    emptyWarnInfo() {
      this.warndata = [];
    },
    getdata() {
      request('get', "index/status/ext").then((res) => {
        if (res.data.flag == 1) {
          this.model(res.data.id) //返回模板
          this.notice(res.data.id, res.data.params, res.data.flag) //通知列表显示
        } else {
          this.recover = res.data.recovery;
          this.cleaner = res.data.scrub;
        }
      });
    },
    gettips() {
      request('get', "index/msg_code").then((res) => {
        if (res.data.flag == 1) {
          this.model(res.data.id) //返回模板
          this.notice(res.data.id, res.data.params, res.data.flag) //通知列表显示
        } else {
          this.$store.commit("getbasetips", {
            basetips: res.data,
          });
        }
      });
    },
    getWarnData() {//获取告警信息
      request('get', 'Alert/alerts_mess', {
        // params: {
        sort: 1,
        status: 0,
        start: 0,
        end: 5,
        // }
      }).then(res => {
        if (res.data.data.length !== 0) {
          res.data.data.map((item, index) => {
            const background = new Map([
              ['紧急', "#ffd6de"],
              ['重要', "#ffe0be"],
              ['警告', "#fbf4bd"],
            ]);
            setTimeout(() => {
              this.$notification.open({
                message: '操作提醒',
                description: h => {
                  return h('div', null, [
                    h('div', {}, item.start_time),
                    h('div', {}, item.warn)
                  ])
                },
                icon: <a-icon type="warning" theme="filled" class="ticon" />,
                duration: 0,
                placement: 'topRight',
                style: {
                  background: background.get(item.severity)
                }
              });
            }, 0)
          })
          setTimeout(() => {
            const dom = document.getElementsByClassName('ant-notification ant-notification-topRight')[0]
            dom.style.top = '66px'
            dom.style.overflowY = 'auto'
            dom.style.height = '500px'
          }, 100)
        }
        if (res.data.flag == 1) {
          this.model(res.data.id) //返回模板
          this.notice(res.data.id, res.data.params, res.data.flag) //通知列表显示
        } else {
          if (res.data.success) {
            this.warndata = res.data.data;
          }
        }
      }).catch(err => {
        console.log(err)
      })
    },
    async getWarningList() {
      const res = await request('get', 'Alert/alerts_mess', {
        sort: 1,
        status: 0,
        start: 0,
        end: 5,
      })
      const list = res.data.data
      const isDelay = localStorage.getItem('isDelay')
      let time
      if (isDelay == 'true') time = 3000
      else time = 0
      this.warningList = list.filter(item => item.severity === '严重' || item.severity === '紧急')
      setTimeout(() => {
        if (this.warningList.length !== 0) {
          localStorage.setItem('isDelay', false)
          this.warningList.map((item, index) => {
            setTimeout(() => {
              this.$notification.open({
                // message: '操作提醒',
                description: h => {
                  return h('div', {}, [
                    h('div', { style: 'display: flex;margin-top:-18px' }, [
                      h('i', { class: 'icon icon-alarm24f red' }),
                      // h('Iconfont', { class: 'icon', type: 'icon-exclaim64f' }),
                      h('div', { style: 'margin-left: 8px;font-size: 16px;color: #333333;' }, this.$t('严重')),
                    ]),
                    h('div', { style: 'margin-left: 24px;margin-top: 2px;font-size: 12px;color: #666666;' }, item.start_time),
                    h('div', { style: 'margin-left: 24px;margin-top: 4px;font-size: 14px;color: #333333;' }, item.des)
                  ])
                },
                // icon: <a-icon type="warning" theme="filled" class="icon" style="color: #cf1b47" />,
                duration: 0,
                placement: 'topRight',
                onClose: () => {
                  const domList = document.querySelectorAll('.ant-notification-notice')
                  if (domList.length == 1) this.warningList = []
                },
                onClick: () => {
                  const dom = document.getElementsByClassName('ant-notification ant-notification-topRight')[0]
                  this.$router.push({ path: '/alertList' })
                  dom.remove()
                  this.warningList = []
                }
              });
            }, 0)
          })
          setTimeout(() => {
            const dom = document.getElementsByClassName('ant-notification ant-notification-topRight')[0]
            dom.style.top = '126px'
            dom.style.overflowY = 'auto'
            dom.style.maxHeight = '600px'
          }, 100)
        }
        if (res.data.flag == 1) {
          this.model(res.data.id) //返回模板
          this.notice(res.data.id, res.data.params, res.data.flag) //通知列表显示
        } else {
          if (res.data.success) {
            this.warndata = res.data.data;
          }
        }
      }, time)
    },
    timergettask() {
      let count = 0;
      request('get', "status/task").then((res) => {
        if (res.data.flag == 1) {
          this.model(res.data.id) //返回模板
          this.notice(res.data.id, res.data.params, res.data.flag) //通知列表显示
        } else {
          for (const item of res.data) {
            if (item.flag == 2) {
              count++;
            }
            this.model(item.id); //返回模板
            item.des = this.asFormat(
              localStorage.getItem("themodel"),
              item.params
            );
            item.extend = false //控制是否展开
          }
          if (count !== 0) {
            this.$store.commit("gettaskflag", {
              taskflag: true,
            });
          } else {
            this.$store.commit("gettaskflag", {
              taskflag: false,
            });
          }
          this.$store.commit("gettasks", {
            tasklist: res.data,
          });
          localStorage.removeItem("themodel"); //清除缓存的参数，防止后续出错
        }
      });
    },

    // 退出登录
    quit() {
      request('DELETE', "usermanager/login/", {
        username: this.$store.state.loginuser,
        id: Number(localStorage.getItem('user_id'))
      }).then((res) => {
        if (res.data.flag == 0) {
          localStorage.clear()
          const dom = document.getElementsByClassName('ant-notification ant-notification-topRight')[0]
          if (dom) dom.style.top = '66px'
          const domList = document.querySelectorAll('.ant-notification-notice')
          if (domList.length !== 0) domList.forEach((dom) => dom.remove())
          this.warningList = []
          this.$router.push('/');
          this.$notification['success']({
            message: this.$t('Logout-ok'),
            duration: 3,
          });
        } else {
          this.model(res.data.id) //返回模板
          this.notice(res.data.id, res.data.params, res.data.flag) //通知列表显示
        }
      });
    },

    //通知交互
    ws() {
      this.initWebSocket();
    },
    initWebSocket() {
      if ("WebSocket" in window) {
        const wsurl = "ws://" + this.wsurl + "/notice";
        this.ws = new WebSocket(wsurl);
        this.ws.onopen = this.wsonopen;
        this.ws.onmessage = this.wsonmessage;
        this.ws.close = this.wsclose;
      } else {
        // 浏览器不支持 WebSocket
        console.log("您的浏览器不支持 WebSocket!");
      }
    },
    wsonopen() {
      //打开链接，发送数据
      console.log("websocket已连接，数据发送中...");
    },
    wsonmessage(evt) {
      //接收数据
      let received_msg = evt.data;
      // console.log(received_msg,'接的数据')
      this.resetSetItem("watchStorage", received_msg);
      this.timergettask();
      console.log("数据已接收...");
    },
    wsclose() {
      //关闭连接
      this.ws.close();
      console.log("已断开连接...");
    },
    //默认选中的语言与主题设置
    defaultSetting() {
      if (this.$store.state.language == 'zh') {
        this.currentSelectedKeys[1] = 'Chinese';
      } else {
        this.currentSelectedKeys[1] = 'English';
      }
      if (localStorage.getItem('theme') == 'default' || localStorage.getItem('theme') == undefined) {
        this.currentSelectedKeys[0] = 'default';
      } else {
        this.currentSelectedKeys[0] = 'wz_blue';
      }
      document.body.setAttribute('data-theme', localStorage.getItem('theme'));
    },

    //打开软件声明
    isOpenDeclare(value) {
      this.declare_dialog = value;
    },

    // 关闭token过期窗口
    closeTokenModal() {
      this.showTokenErrorModal = false;
    },

    // 上传完许可文件，更新版权
    updateRight() {
      this.getRight();
      this.getVersion();
    },
    handleClear() {
      const dom = document.getElementsByClassName('ant-notification ant-notification-topRight')[0]
      dom.style.top = '86px'
      const domList = document.querySelectorAll('.ant-notification-notice')
      if (domList.length !== 0) domList.forEach((dom) => dom.remove())
      this.warningList = []
    },
    handleNavigate() {
      this.$router.push({ path: '/task' })
    }
  },
  computed: {
    getbasetips() {
      return this.$store.state.basetips;
    },
    gettasks() {
      return this.$store.state.tasklist;
    },
    gettaskflag() {
      return this.$store.state.taskflag;
    },
    getlanguage() {
      return this.$store.state.language;
    },
  },
  watch: {
    // getlanguage(val){
    //     console.log(val,'bbbbb')
    // }
    oflag(newValue) {
      if (!newValue) {
        this.toflag = true;
      } else {
        this.toflag = false;
      }
    },
  },
  created() {
    // this.initWebSocket();
  },
  mounted() {
    this.$store.dispatch('commonModule/handleGetConfig')
    // this.getdata();
    let lang = '';
    if (this.$store.state.language == 'zh') {
      lang = 'zh';
    } else {
      lang = 'en';
    }
    this.$i18n.locale = lang;
    this.language_temp = lang;
    localStorage.setItem("language", this.language_temp);
    this.language_temp = localStorage.getItem("language");
    this.$store.commit("getlanguage", {
      language: this.language_temp,
    });
    this.gettips();
    // this.gettask()
    // this.intervalId = setInterval(this.getdata, 60000); //定时刷新页面数据
    // this.timeoutId = setInterval(this.timergettask, 90000); //定时刷新页面数据
    // this.changelanguage("zh");
    // if (localStorage.getItem('language')!==null) {
    //     console.log('这是翻译初始化')
    //   this.language = localStorage.getItem('language')
    // }
    // else {
    //     this.changelanguage('zh')
    // }
    // this.getWarnData();
    this.getWarningList()
    this.getRight();
    this.defaultSetting();

    this.getTasksList();
    this.timer = setInterval(() => {
      this.getTasksList();
    }, 1000 * 10)

    this.getVersion();
  },
  destroyed() {
    clearInterval(this.timeoutId); //清除定时器
    // clearInterval(this.intervalId); //清除定时器
    // this.wsclose();
    clearInterval(this.timer);
  },
};
</script>
<style scoped>
#top {
  background-color: var(--themeColor);
  width: 100%;
  height: 3.5rem;
  position: fixed;
  top: 0;
  z-index: 3;
  /* overflow: hidden; */
}

.split-vertical-line {
  display: inline-block;
  border-left: 2px solid #fff;
  height: 30px;
  margin: 0 15px;
  vertical-align: middle;
}

.title {
  text-align: left;
  line-height: 3.5em;
}

.dataview {
  background-color: white;
  font-size: 0.8rem;
  color: var(--themeColor);
  height: 2.5em;
  margin: 1em 0.2em;
  text-align: center;
  line-height: 2.5em;
  border-radius: 1rem;
  padding: 0 1rem;
}

.topfunc {
  color: white;
  line-height: 3.5em;
  font-size: 1.1em;
  float: right;
  margin-top: 0.2rem;
}

.font {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lang-desc {
  display: flex;
  justify-content: space-between;
}

.lang-desc span:nth-child(2) {
  color: var(--themeColor);
}

.ant-popover-inner-content {
  height: 20rem;
  overflow-y: auto;
  padding: 8px 8px !important;
}

.tall {
  height: 20rem;
  overflow-y: auto;
}

.tcontent {
  width: 20rem !important;
  margin-top: 0.3rem !important;
  padding: 0.5rem;
  padding-bottom: 0;
}

.tred {
  background-color: #ffd6de;
}

.tgreen {
  background-color: #cef2f0;
}

.tblue {
  background-color: #cde7fe;
}

.tgrey {
  background-color: #eee;
}

.worange {
  background-color: #ffe0be;
}

.wyellow {
  background-color: #fbf4bd;
}

.ticon {
  font-size: 2.5rem;
  line-height: 5.5rem !important;
  margin-left: -8px;
}

.ttitle {
  display: block;
  font-weight: 700;
}

.tredp {
  color: var(--mainRedColor);
}

.tgreenp {
  color: var(--mainGreenColor);
}

.tbluep {
  color: var(--themeColor);
}

.tgreyp {
  color: #666;
}

.worangep {
  color: var(--mainOrangeColor);
}

.wyellowp {
  color: var(--mainYellowColor);
}

.tdetail {
  width: 13rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.texpend {
  width: 13rem;
}

::v-deep .ant-menu-horizontal,
.ant-menu-horizontal>.ant-menu-item:hover,
.ant-menu-horizontal>.ant-menu-submenu:hover,
.ant-menu-horizontal>.ant-menu-item-active,
.ant-menu-horizontal>.ant-menu-submenu-active,
.ant-menu-horizontal>.ant-menu-item-open,
.ant-menu-horizontal>.ant-menu-submenu-open,
.ant-menu-horizontal>.ant-menu-item-selected {
  background-color: var(--themeColor) !important;
  color: #fff !important;
  border-bottom: none;
}

::v-deep .ant-menu-horizontal>.ant-menu-submenu-selected,
.ant-menu-submenu-selected {
  background-color: var(--themeColor) !important;
  border-bottom: none !important;
  color: #fff !important;
}

::v-deep .ant-menu-submenu-title:hover {
  /* background-color: var(--themeColor); */
  color: #fff;
}

::v-deep .ant-menu-horizontal>.ant-menu-item,
.ant-menu-horizontal>.ant-menu-submenu {
  border-bottom: none;
}

::v-deep .ant-menu-horizontal>.ant-menu-submenu-active {
  color: #fff !important;
  border-bottom: none !important;
}

/* 在线引用iconfont字体图标 */
/* @font-face {
  font-family: 'iconfont';  
  src: url('//at.alicdn.com/t/font_2470885_qr8xngoqsrr.eot');
  src: url('//at.alicdn.com/t/font_2470885_qr8xngoqsrr.eot?#iefix') format('embedded-opentype'),
  url('//at.alicdn.com/t/font_2470885_qr8xngoqsrr.woff2') format('woff2'),
  url('//at.alicdn.com/t/font_2470885_qr8xngoqsrr.woff') format('woff'),
  url('//at.alicdn.com/t/font_2470885_qr8xngoqsrr.ttf') format('truetype'),
  url('//at.alicdn.com/t/font_2470885_qr8xngoqsrr.svg#iconfont') format('svg');
}
.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
} */
.descText {
  word-break: break-word;
}

.red {
  color: cf1b47
}

.time {
  font-size: 12px;
  color: #666666;
}

.content {
  font-size: 14px;
  color: #333333;
}

.clear {
  position: absolute;
  right: 32px;
  bottom: -50px;
  border: solid 1px #cf1b47;
  color: #cf1b47;
}

::-webkit-scrollbar {
  /*滚动条整体样式*/
  width: 4px;
  /*高宽分别对应横竖滚动条的尺寸*/
  height: 1px;
}
</style>
import { splice } from "core-js/core/array";

